<template>
  <div class="app-container">

    <h2 class="text-center">{{ paperData.title }}</h2>
    <p class="text-center" style="color: #666">{{ paperData.createTime }}</p>
    <a-row :gutter="24" style="margin-top: 50px">

      <a-col :span="8" class="text-center">
        考生姓名：{{ paperData.nickname }}
      </a-col>

      <a-col :span="8" class="text-center">
        考试用时：{{ paperData.userTime }}分钟
      </a-col>

      <a-col :span="8" class="text-center">
        考试得分：{{ paperData.userScore }}
      </a-col>
      <a-divider/>

    </a-row>

    <a-card style="margin-top: 20px">
      <div v-for="item in paperData.quList" :key="item.id" class="qu-content">
        <p>{{ item.sort + 1 }}.{{ item.content }}（得分：{{ item.actualScore }}）</p>
        <p v-if="item.image!=null && item.image!=''">
          <a-image :src="item.image"
                   fallback=""
                   :width="100" style="max-width:100%;"/>
        </p>
        <div v-if="item.quType === 1 || item.quType===3">
          <a-radio-group v-model:value="radioValues[item.id]">
            <template v-for="an in item.answerList" :key="an">
              <div v-if="an.image!=null && an.image!=''">
                <a-radio :value="an.id" :style="radioStyle" style="margin-bottom: 100px">
                  {{ an.abc }}.{{ an.content }}
                  <a-image :width="100" :src="an.image"
                           fallback=""
                           style="max-width:100%;"/>
                </a-radio>
              </div>
              <div v-else>
                <a-radio :value="an.id" :style="radioStyle">
                  {{ an.abc }}.{{ an.content }}
                </a-radio>
              </div>
            </template>
          </a-radio-group>

          <a-row :gutter="24">

            <a-col :span="12" style="color: #24da70">
              正确答案：{{ radioRights[item.id] }}
            </a-col>

            <a-col v-if="!item.answered" :span="12" style="text-align: right; color: #ff0000;">
              答题结果：未答
            </a-col>

            <a-col v-if="item.answered && !item.isRight" :span="12" style="text-align: right; color: #ff0000;">
              答题结果：{{ myRadio[item.id] }}
            </a-col>

            <a-col v-if="item.answered && item.isRight" :span="12" style="text-align: right; color: #24da70;">
              答题结果：{{ myRadio[item.id] }}
            </a-col>

          </a-row>

        </div>

        <div v-if="item.quType === 4">

          <a-row :gutter="24">

            <a-col :span="12">
              我的回答：{{ item.answer }}
            </a-col>

          </a-row>

        </div>

        <div v-if="item.quType === 2">
          <a-checkbox-group v-model:value="multiValues[item.id]">

            <template v-for="an in item.answerList" :key="an">
              <div v-if="an.image!=null && an.image!=''" style="clear: both;margin-bottom: 100px">
                <a-checkbox :value="an.id">{{ an.abc }}.{{ an.content }}
                  <a-image :src="an.image" :width="100"
                           fallback=""
                           style="max-width:100%;"/>
                </a-checkbox>
              </div>
              <div v-else>
                <a-checkbox :value="an.id">{{ an.abc }}.{{ an.content }}
                </a-checkbox>
              </div>
            </template>
          </a-checkbox-group>
          <a-row :gutter="24">
            <a-col :span="12" style="color: #24da70">
              正确答案：{{ multiRights[item.id].join(',') }}
            </a-col>
            <a-col v-if="!item.answered" :span="12" style="text-align: right; color: #ff0000;">
              答题结果：未答
            </a-col>
            <a-col v-if="item.answered && !item.isRight" :span="12" style="text-align: right; color: #ff0000;">
              答题结果：{{ myMulti[item.id].join(',') }}
            </a-col>
            <a-col v-if="item.answered && item.isRight" :span="12" style="text-align: right; color: #24da70;">
              答题结果：{{ myMulti[item.id].join(',') }}
            </a-col>
          </a-row>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>

import {reactive, ref} from "vue";
import {useRoute} from 'vue-router';
import {paperResult} from "@/api/module/exam";

export default {
  setup() {
    // 获取父组件传过来的ID
    const routers = useRoute();
    const sss = JSON.parse(routers.query.id);
    console.log(sss)
    const paperData = ref({
      quList: []
    })
    // 试卷ID
    const paperId = id
    const id = JSON.parse(routers.query.id)
    const radioValues = {}
    const multiValues = {}
    const radioRights = {}
    const multiRights = {}
    const myRadio = {}
    const myMulti = {}
    const fetchData = function () {
      const params = {id: id}
      paperResult(params).then(response => {
      // 试卷内容
      paperData.value = response.data

      // 填充该题目的答案
      paperData.value.quList.forEach((item) => {
        let radioValue = ''
        let radioRight = ''
        let myRadios = ''
        const multiValue = []
        const multiRight = []
        const myMultis = []

        item.answerList.forEach((an) => {
          // 用户选定的
          if (an.checked) {
            if (item.quType === 1 || item.quType === 3) {
              radioValue = an.id
              myRadios = an.abc
            } else {
              multiValue.push(an.id)
              myMultis.push(an.abc)
            }
          }

          // 正确答案
          if (an.isRight) {
            if (item.quType === 1 || item.quType === 3) {
              radioRight = an.abc
            } else {
              multiRight.push(an.abc)
            }
          }
        })
        console.log("item.id++", item.id)
        multiValues[item.id] = multiValue
        radioValues[item.id] = radioValue

        radioRights[item.id] = radioRight
        multiRights[item.id] = multiRight

        myRadio[item.id] = myRadios
        myMulti[item.id] = myMultis
      })

      console.log(multiValues)
      console.log(radioValues)
      })
    }
    fetchData()
    //  单选框样式
    const radioStyle = reactive({
      display: 'flex',
      height: '30px',
      lineHeight: '30px',
    });
    return {
      paperData,
      radioValues,
      multiValues,
      radioRights,
      multiRights,
      myMulti,
      paperId,
      myRadio,
      radioStyle,
    }
  }
}
</script>

<style scoped>
.app-container {
  background-color: white;
  padding: 20px;
}

.text-center {
  text-align: center
}

.qu-content {

  border-bottom: #eee 1px solid;
  padding-bottom: 10px;

}

.qu-content div {
  line-height: 30px;
}

.a-checkbox-group label, .a-radio-group label {
  width: 100%;
}

.card-title {
  background: #eee;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
}

.card-line {
  padding-left: 10px
}

.card-line span {
  cursor: pointer;
  margin: 2px;
}

</style>
